<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body, iframe {
            width: 100%;
            height: 100%;
        }
        html body {
            display: inline-flex;
        }
        iframe {
            flex: auto;
            max-width: 800px;
            height: 100%;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        <ul id="app">

        </ul>
    </div>
    <iframe id="preview" src="about.html" frameborder="0"></iframe>

    <script>
        var pages = [
            "about.html",
            "zenity.html",
            "gradle.html",
            "qemu.html",
            "cargo.html",
            "dnsmasq.html",
            "hostapd.html",
            "images.html",
            "iptables.html",
            "rust.html",
            "vsc-plugin.html",
            "在ubuntu下配置热点.html",
            "解决下载VSCode慢.html",
            "在ubuntu终端下连接WiFi.html",
            "pkg-config.html",
            "luarocks.html"
        ]
        var preview = document.querySelector("#preview")
        

        var app = document.querySelector("#app")
        pages.forEach(item => {
            var li = document.createElement("li")
            var a = document.createElement("a")
            a.innerHTML = item 
            a.onclick = function(e){
                preview.setAttribute("src", this.innerHTML)
            }
            li.appendChild(a)
            app.appendChild(li)
        });
    </script>
</body>
</html>